<div class="sticky top-0 z-10 bg-components-panel-bg mb-4">
  <div class="flex justify-between items-center p-2">
    <h1 class="shrink-0 text-lg px-2 font-semibold text-gray-900">{{ 'PAC.Xpert.ConversationLog' | translate: {Default: 'Conversation Log'} }}</h1>
    <button type="button" class="btn-close btn btn-secondary flex items-center justify-center w-6 h-6 cursor-pointer z-20"
      (click)="close.emit()">
      <i class="ri-close-line"></i>
    </button>  
  </div>
  <div class="shrink-0 flex items-center px-4 border-b-[0.5px] border-[rgba(0,0,0,0.05)]">
    <div class="tab mr-6 py-3 border-b-2 border-transparent font-semibold leading-[18px] text-gray-400 cursor-pointer"
      [class.active]="pageType() === 'overview'"
      (click)="pageType.set('overview')"
    >{{ 'PAC.Xpert.Overview' | translate: {Default: 'Overview'} }}</div>
    <div class="tab mr-6 py-3 border-b-2 border-transparent font-semibold leading-[18px] text-gray-400 cursor-pointer"
      [class.active]="pageType() === 'steps'"
      (click)="pageType.set('steps')"
    >{{ 'PAC.Xpert.Steps' | translate: {Default: 'Steps'} }}</div>
  </div>
</div>

@switch (pageType()) {
  @case('overview') {
    @if (execution(); as execution) {
      <xpert-agent-execution class="w-full px-4" [execution]="execution" />
    }
  }
  @case('steps') {
    @for (execution of executions(); track execution.id) {
      <xpert-agent-execution-accordion [execution]="execution" />
    }
  }
}
